<template>
  <div class="quickReplyTree">
    <el-collapse v-model="activeNames">
      <el-collapse-item :name="item._id" v-for="(item, index) in treeData" :key="index">
        <template slot="title">
          <i class="iconfont" :class="activeNames.indexOf(item._id) > -1 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
          {{item.label}}
        </template>
       <template v-if="item.contentList && item.contentList.length > 0">
         <p v-for="(contentItem, contentIndex) in item.contentList" :key="contentIndex" :style="{marginLeft: `${item.level * 15}px`}">
           <span class="content">{{contentItem.content}}</span>
           <span class="sendBtn" @click="sendFun(contentItem)">发送</span>
           <span class="useBtn" @click="useFun(contentItem)">使用</span>
         </p>
       </template>
       <quickReplyTree style="marginLeft: 10px" v-if="item.children && item.children.length > 0" :treeData="item.children" :type="type"></quickReplyTree>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { WebchatModule } from '@/store/modules/webchat'
@Component({
  name: 'quickReplyTree'
})
export default class QuickReplyTree extends Vue {
  @Prop() private treeData: any
  @Prop() private type: string | undefined

  private $bus: any

  private activeNames = []

  private useFun (data: any) {
    const actionData = { url: `/im-km/quick-reply/action/${this.type}/content/hits`, method: 'POST', data: { _id: data._id } }
    WebchatModule.webchatCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.$bus.$emit('kmUse', data.content)
      }
    })
  }

  private sendFun (data: any) {
    const actionData = { url: `/im-km/quick-reply/action/${this.type}/content/hits`, method: 'POST', data: { _id: data._id } }
    WebchatModule.webchatCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.$bus.$emit('sendInfo', data)
      }
    })
  }
}
</script>
<style scoped lang="stylus">
  p
    margin 5px 0px
    .sendBtn
      margin-right 10px
    .sendBtn, .useBtn
      color #008BEE
      cursor pointer
    .content
      display inline-block
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      width calc(100% - 90px)
      margin-right 10px
      color #71798C
      vertical-align middle
  .iconfont
    margin-right 5px
    color #A6A6AE
</style>
<style lang="stylus">
  .quickReplyTree
    .el-collapse-item__arrow
      display none
    .el-collapse-item__content
      padding-bottom 0px
    .el-collapse, .el-collapse-item__wrap
      border none
    .el-collapse-item__header
      border none
      font-size 12px
      height 28px
      line-height 2px
</style>
